<template>
  <div style="position: absolute; width: 100%; top: 0px; bottom: 0px;" id="canvas4"></div>
</template>
<script>
  import Q from '../lib/qunee-es.js';
  import request from '@/utils/request';
  export default {
    mounted() {
      var graph = new Q.Graph('canvas4');

      /**
       * 创建节点
       */
      function createNode(name, from) {
        var node = graph.createNode(name);
        if (from) {
          graph.createEdge(from, node);
        }
        return node;
      }

      /**
       * 初始化数据
       */
      function requestQunee() {
         request({
          url: '/bigScreen/tmOrganization',
          method: 'post'
        }).then((response) => {
           createRootNode(response)
         })
      }




      /**
       * 递归qunee 根结点
       */
      function createRootNode(json) {
        //camp数据处理
        var campArray = json["collection"];
        campRootArray.pop('0');
        var campArraySize = campArray.length;
        while (campArraySize > 0){
          var campName = campArray[campArraySize-1];

          var camp = createNode(campName);

          camp.parentChildrenDirection = Q.Consts.DIRECTION_BOTTOM;

          //camp下第一层根结点的数据处理
          var campRootArray = json[campName];
          var campRootArraySize = campRootArray.length;
          while (campRootArraySize > 0){
            var index = campRootArraySize-1;
            var name = campRootArray[index].orgName+'-'+campRootArray[index].orgId;
            var campRoot = createNode(name,camp);
            campRoot.parentChildrenDirection = Q.Consts.DIRECTION_RIGHT;
            campRoot.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;
            //camp下第二层节点的数据处理
            var parentNodeInfo = campRootArray[index];
            var parentNode = campRoot;
            createNodeRecursion(parentNodeInfo,parentNode,json);
            campRootArraySize--;
          }
          campArraySize--;
        }
        Unfold();
      }

      /**
       * 递归qunee子节点
       */
      function createNodeRecursion(parentNodeInfo,parentNode,json) {
          var key = parentNodeInfo.orgId;
          var childrenRootArray = json[key];
          var childrenRootArraySize = childrenRootArray.length;
          while (childrenRootArraySize > 0){
            var index = childrenRootArraySize-1;
            var name  = childrenRootArray[index].orgName+'-'+childrenRootArray[index].orgId;
            var childrenRoot = createNode(name,parentNode);
            childrenRoot.parentChildrenDirection = Q.Consts.DIRECTION_RIGHT;
            childrenRoot.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_VERTICAL;
            var childrenRootInfo = childrenRootArray[index];
            createNodeRecursion(childrenRootInfo,childrenRoot,json);
            childrenRootArraySize--;
          }
      }


      requestQunee();

      /**
       * 展开节点
       */
      function Unfold() {
        var layouter = new Q.TreeLayouter(graph);
        layouter.layoutType = Q.Consts.LAYOUT_TYPE_EVEN_HORIZONTAL;
        layouter.doLayout({
          callback: function () {
            graph.zoomToOverview();
          }
        });
      }

        /**
         *双击修改信息
         */
        graph.ondblclick = function (evt) {
          var node = graph.getElementByMouseEvent(evt);
          if (node) {
            var newName = prompt("New Name:");
            if (newName) {
              console.log(node.name);
              node.name = newName;
              console.log(node.name)
            }
          }
        }
    }

  }


</script>
